<template>
  <el-card v-loading="templateLoading" class="box-card box-card-list">
    <div slot="header" class="clearfix">
      <div class="temHeader">
        <span class="docIcon" />
        <span class="area-header-title" @click="init">{{ $t('文档') }}</span>

        <div class="rt newPic" @click="drawer = true">
          <span class="area-header-title" @click="showImageReady">{{ $t('最近照片') }}</span>
        </div>
      </div>
    </div>
    <div class="text item">

      <div v-for="(file, index) in fileList" :key="index" class="template showFileName">
        <div class="lt showFileName" style=" width: 85%;">
          <span class="link-type" @click="onlinePreview(file.id)">{{ file.name }}</span>
        </div>
        <div v-if="configDownloadEnabled" class="rt">
          <el-button icon="el-icon-download" type="text" style="font-size: 13px;" @click="DownloadFile(file.id)">{{ $t('下载') }}</el-button>
        </div>
      </div>
      <div v-if="fileList !== null && fileList !== undefined && fileList.length > 0">
        <el-pagination
          v-show="total>0"
          small
          layout="prev, pager, next"
          :page-size="5"
          :pager-count="5"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>
    <el-drawer :visible.sync="drawer" :title="$t('最近照片')" :with-header="false">
      <div style="font-size: 15px;font-weight: bold;padding: 10px;border: 1px solid #f2f2f2;"><span style="margin-left: 10px">{{ $t('最近照片') }}</span></div>
      <div class="newList" style="padding: 10px;height: calc(100% - 60px);margin-top: 20px">
        <div v-if="srcList.length > 0" class="demo-image__placeholder">
          <div class="block">
            <div v-for="(item, index) in srcList" :key="index" style="float: left;">
              <el-image
                style="width: 99px; height: 99px"
                :src="item.url"
                @click="onlinePreview(item.id)"
              />
            </div>
            <div v-if="loadButtonImage" class="lt showFileName" style="width: 100%;text-align: center;">
              <span class="link-type" style="width: 100%;height: 45px;line-height: 40px;font-size: 13px;padding: 0;" @click="loadDataImage">
                {{ $t('加载更多...') }}
              </span>
            </div>
          </div>
        </div>
        <div v-else class="noneData">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </div>
    </el-drawer>
    <OnlinePreview ref="OnlinePreview" />
  </el-card>

</template>
<script>
  import { findListByBusinessId } from '@/api/file/fileBase'
  import { config } from '@/utils'
  import { downLoadFileOpen } from '@/utils/zipdownload'
  import { getToken } from '@/utils/auth'
export default {
  props: {
    businessType: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      templateLoading: false,
      drawer: false,
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        id: undefined,
        // boolean 是否只加载图片
        isNewRecord: undefined
      },
      queryParamsImage: {
        pageNum: 1,
        pageSize: 16,
        id: undefined,
        // boolean 是否只加载图片
        isNewRecord: undefined
      },
      // 最近照片
      srcList: [],
      // 文件列表
      fileList: [],
      // 图片是否继续加载
      loadButtonImage: true,
      pageGotoType: true,
      // 全局下载开关
      configDownloadEnabled: true
    }
  },
  created() {
    // 全局下载开关
    this.getConfigKeyToDownload('enable_download').then(response => {
      this.configDownloadEnabled = (response.msg === 'true')
    })
  },
  methods: {
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.init()
    },
    init() {
      this.pageGotoType = true
      this.queryParams.businessId = this.$route.query.id
      this.queryParams.dataType = this.businessType
      this.queryParams.isNewRecord = false
      this.templateLoading = true
      findListByBusinessId(this.queryParams).then(response => {
        if (response.rows.length >= 1) {
          this.fileList = response.rows
          this.total = response.total
        }
        this.templateLoading = false
      })
    },
    // 预览附件
    onlinePreview(id) {
      this.$refs.OnlinePreview.onlinePreviewFile(id)
    },
    DownloadFile(id) {
      downLoadFileOpen(id)
    },
    showImageReady() {
      if (this.srcList === null || this.srcList.length <= 0 || this.srcList === '' || this.srcList === undefined) {
        this.srcList = []
        this.showImage()
      }
    },
    showImage() {
      this.queryParamsImage.businessId = this.$route.query.id
      this.queryParamsImage.dataType = this.businessType
      this.queryParamsImage.suffix = 'image'
      findListByBusinessId(this.queryParamsImage).then(response => {
        if (response.rows.length !== 16) {
          this.loadButtonImage = false
        }
        response.rows.forEach(item => {
          var temp = {
            id: item.id,
            url: config.baseURL + '/onlinePreview/downloadUrl?id=' + item.id + '&Authorization=' + getToken()
          }
          this.srcList.push(temp)
        })
      })
    },
    loadDataImage() {
      this.queryParamsImage.pageNum += 1
      this.showImage()
    },
    pageGoToInput() {
      if (this.pageGotoType) {
        this.pageGotoType = false
      }
    }
  }
}
</script>
<style scoped>
  .showFileName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-drawer__body{
    overflow: scroll;
    width: 101%;
  }
  .phaseBefore .box-card-list {
    margin-top: 0px;
  }
</style>
